<template>
  <div class="shop">
    <h1>{{msg}}</h1>
    <mt-header fixed title="购物车"></mt-header>
      <mt-cell class="item" v-for="item in goodsList" :key="item.goodName">
        <img :src="item.goodImg" alt="">
        <h4>{{item.goodName}}</h4>
        <p class="cp">价格：{{item.goodBuyCount * item.goodPrice}}元</p>
        <p class="price">
          <span @click="reduce(item)">-</span>
          {{item.goodBuyCount}}
          <span @click="add(item)">+</span>
        </p>
        <mt-button @click="removeClick(item)" class="mbtn" type="danger" size="small">删除</mt-button>
      </mt-cell>
      <mt-cell class="items" :class="{ abcd: bool}">
        <p class="cp">合计：{{allGoodsCount}}件商品</p>
        <p class="pp">总价：{{allGoodsPrice}}元</p>
      </mt-cell>
      <mt-button @click="menuClick({ name: 'menu'})" class="btnM" type="primary" size="large">提交订单</mt-button>
  </div>
</template>

<script>
import { getAllGoods, removeGood, shopCart } from "../services/product_type";
import cookie from "js-cookie";
import { Toast } from 'mint-ui';

export default {
  name: "haha",
  data() {
    return {
      goodsList: [],
      msg: "",
      allGoodsCount: '',
      allGoodsPrice: '',
      bool: true,
    };
  },
  methods: {
    // 初始化界面获取数据
    init() {
      getAllGoods({
        userName: cookie.get("userName")
      })
        .then(res => {
          console.log(res);
          this.allGoodsCount = res.data.all;
          this.allGoodsPrice = res.data.allP;
          this.goodsList = res.data.info;
          this.bool = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 点击删除按钮删除购物车中的商品
    removeClick(item) {
      console.log("删除方法");
      removeGood({
        id: item._id
      })
        .then(res => {
          console.log(res);
          this.$eventBus.$emit('reduceShopCart', item.goodBuyCount);
          this.init();
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 点击 + 增加购买商品数量
    add(item) {
      shopCart({
        userName: cookie.get("userName"),
        goodName: item.goodName
      })
        .then(res => {
          this.$eventBus.$emit("addToShopCart", 1);
          this.init();
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 点击 - 减少购买商品数量
    reduce(item) {
      if (item.goodBuyCount == 1) {
        Toast({
          message: '还剩最后一件了，不能再减少了，亲',
          position: 'middle',
          duration: 2000,
        });
      } else {
        shopCart({
          userName: cookie.get("userName"),
          goodName: item.goodName,
          count: -1
        })
          .then(res => {
            this.$eventBus.$emit('reduceShopCart', 1);
            this.init();
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    menuClick(item) {
      if(this.allGoodsCount == '') {
        Toast({
          message: '您的购物车中没有商品，无法提交订单',
          position: 'middle',
          duration: 2000,
        });
      } else {
        this.$router.push(item);
      }
    }
  },
  // 判断用户是否登陆，登陆调用 init 初始化，否则提醒用户登陆
  created() {
    if (cookie.get("userName")) {
      this.init();
    } else {
      this.msg = "请先登陆账户……";
    }
  }
};
</script>
<style scoped>
.item {
  height: 140px;
  position: relative;
  margin-top: 30px;
}
.items{
  height: 140px;
  position: relative;
  margin-top: 30px;
  background-color: lightcyan;
  color: black;
  font-size: 1rem;
  text-align: center;
  font-weight: bold;
}
.items .cp{
  position: absolute;
  left: 100px;
}
.items .pp{
  position: absolute;
  left: 100px;
  top: 50px;
}
.item img {
  width: 100px;
  height: 100px;
  background-color: gray;
  position: absolute;
  left: 20px;
  top: 20px;
  border-radius: 0;
}
.item h4 {
  position: absolute;
  color: black;
  left: 140px;
}
.item .cp {
  position: absolute;
  left: 140px;
  top: 50px;
  font-size: 0.8rem;
}
.item .price {
  position: absolute;
  left: 140px;
  top: 25px;
  color: black;
  margin-right: 10px;
}
.item .price span {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 15px;
}
.mbtn {
  font-size: 0.8rem;
  position: absolute;
  bottom: 5px;
  right: 50px;
}
.btnM{
  margin: 2rem 0;
}
.abcd{
  display: none;
}
</style>


